<template>
  <page-header-wrapper>
    <a-card>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="赠送积分比例" prop="rate">
          <a-input-number
            style="width:400px;margin-right:10px;"
            v-model="form.rate"
            :max="100"
            :min="0"
            :precision="2"
            placeholder="请输入抽成比例"
          />
          <span>%</span>
        </a-form-model-item>

        <a-form-model-item label="当面付商户" prop="face_pay_ids">
          <a-select
            v-model="form.face_pay_ids"
            mode="multiple"
            style="width:400px;"
            placeholder="请选择当面付商户"
            allowClear
            :maxTagCount="2"
          >
            <a-select-option :value="item.id" v-for="item of list" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="赠送积分商户" prop="give_integral_ids">
          <a-select
            allowClear
            :maxTagCount="2"
            v-model="form.give_integral_ids"
            mode="multiple"
            style="width:400px;"
            placeholder="请选择赠送积分商户"
          >
            <a-select-option :value="item.id" v-for="item of list" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="时间选择" prop="time">
          <a-range-picker
            v-model="form.time"
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
          />
        </a-form-model-item>

        <a-form-model-item label="状态" prop="status">
          <a-radio-group v-model="form.status">
            <a-radio value="1"> 开启 </a-radio>
            <a-radio value="2"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" :loading="btnLoading" @click="onSubmit"> 保存 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { setIntegralRules, getIntegralRules, saasGetStore } from '@/api/saas/payFaceToFace'

export default {
  data() {
    return {
      form: {
        rate: '0',
        face_pay_ids: [],
        give_integral_ids: [],
        time: [],
        status: '1'
      },

      rules: {
        give_integral_ids: [{ required: true, message: '请至少选择一个', trigger: 'change' }],
        face_pay_ids: [{ required: true, message: '请至少选择一个', trigger: 'change' }],
        rate: [{ required: true, message: '抽成比例不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        time: [{ required: true, message: '请选择时间', trigger: 'change' }]
      },

      btnLoading: false,
      list: []
    }
  },

  created() {
    saasGetStore().then(res => {
      this.list = res.data.list || []
      let { query } = this.$route
      if (query.id) {
        this.getIntegralRules(query.id)
      }
    })
  },

  methods: {
    // 获取配置数据
    async getIntegralRules(rule_id) {
      this.btnLoading = true
      const res = await getIntegralRules({
        rule_id
      })
      this.btnLoading = false
      let { id, end_date, start_date, status, rate, faceStore, giveIntegralStore } = res.data

      this.form = {
        rate,
        rule_id: id,
        face_pay_ids: faceStore.map(el => el.id),
        give_integral_ids: giveIntegralStore.map(el => el.id),
        time: [start_date, end_date],
        status
      }

      // console.log(res)
      // if (res.code == 0) {
      //   this.form = res.data
      // }
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.btnLoading = true
          let form = JSON.parse(JSON.stringify(this.form))

          form.face_pay_ids = form.face_pay_ids.join(',')
          form.give_integral_ids = form.give_integral_ids.join(',')
          let [start_date, end_date] = form.time
          delete form.time

          const res = await setIntegralRules({
            ...form,
            start_date,
            end_date
          })

          this.btnLoading = false

          if (!res.code) {
            this.$message.success('保存成功！')

            this.$router.go(-1)
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
